import React from "react";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { useShallow } from "zustand/react/shallow";
import { useMenuStore } from "@/store/menus";

const CollapseIcon: React.FC = () => {
  const { isCollapse, setCollapsed } = useMenuStore(useShallow((state) => ({ isCollapse: state.isCollapse, setCollapsed: state.setCollapsed })));

  return (
    <React.Fragment>
      {React.createElement(isCollapse ? MenuUnfoldOutlined : MenuFoldOutlined, {
        className: "collapsed",
        onClick: () => setCollapsed(!isCollapse)
      })}
    </React.Fragment>
  );
};

export default CollapseIcon;
